<template>
  <div class="pagination">
    <span>共 <strong>{{total}}</strong> 条</span>
    <div>
      <span @click="handleClick(1 - currentPage)">首页</span>
      <span @click="handleClick(-1)">上一页</span>
      <span><strong>{{currentPage}}</strong></span>
      <span @click="handleClick(1)">下一页</span>
      <span @click="handleClick(Math.ceil(total / limit) - currentPage)">尾页</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleClick(pageNo) {
      if ((this.currentPage + pageNo < 1) || (this.currentPage + pageNo > Math.ceil(this.total / this.limit))) {
        return
      }
      this.currentPage = this.currentPage + pageNo
      this.$emit('pagination')
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  span {
    cursor: pointer;
    margin-right: 5px;
    &:hover {
      color: #365897;
    }
  }
}
</style>
